<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>栅格系统</title>
		<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
		<style>
			.text{
				font-weight: bolder;
			}
			div{
				border: 1px solid black ;
				background-color: yellow;
			}
			.box {
				margin-top: 30px;
			}
		</style>
	</head>
	<body>
		<div class="text">
			单元格的类还有其他选择 ,一共有四种：<br />
			　　　　.c0l-xs-　　无论屏幕宽度如何，单元格都在一行，宽度按照百分比设置；试用于手机；<br />
			　　　　.col-sm-　　屏幕大于768px时，单元格在一行显示；屏幕小于768px时，独占一行；试用于平板；<br />
			　　　　.col-md-　　屏幕大于992px时，单元格在一行显示；屏幕小于992px时，独占一行；试用于桌面显示器；<br />
			　　　　.col-lg-　　屏幕大于1200px时，单元格在一行显示；屏幕小于1200px时，独占一行；适用于大型桌面显示器；<br />
			以上的情况可以通过下面的代码清晰的理解：
		</div>
		<div class="container box">
			<div class="row">
				<div class="col-xs-18 col-sm-12 col-md-12">屏幕大于992px时：.col-md-8 和.col-md-4 还处于 作用范围内，如下</div>
			</div>
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			</div>
			<div class="row">
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
				<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			</div>
		</div>
		
		<div class="container box">
			<div class="row">
				<div class="col-xs-12 col-md-12">屏幕在769px-992px之间时：.col-md-已失效，而.col-sm- 还处在 作用范围内，如下</div>
			</div>
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-8">col-xs-12 col-sm-6 col-md-8</div>
				<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
			</div>
			<div class="row">
				<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
				<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
				<div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div>
			</div>
		</div>
		
		<div class="container box">
			<div class="row">
				<div class="col-xs-18 col-sm-12 col-md-12">屏幕宽度小于768px时，.col-sm-已失效  只有.col-xs- 不受屏幕宽度影响，这时候就由.col-xs-起作用，如下</div>
			</div>
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-8">col-xs-12 col-sm-6 col-md-8</div>
				<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
			</div>
			<div class="row">
				<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
				<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
				<div class="col-xs-6 col-md-4">col-xs-6 col-md-4</div>
			</div>
		</div>
		
		<script src="lib/jquery/jquery-1.11.0.min.js"></script>
		<script src="lib/bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>
